<template>
    <div class="container">
        <el-row :gutter="8">
            <el-col :span="6">
                <el-form-item label="业务编号">
                    <el-input v-model="data.doccode" disabled> </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="客户单号">
                    <el-input v-model="data.custDocNo"> </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="委托单位">
                    <selectDown
                        v-model:modelData="data.custId"
                        placeholder="请输入后搜索"
                        urlType="buenterprise"
                        urlQueryData="客户"
                        :option="initOption.wtdwOption"
                        @getOption="getCustData"
                        fit-input-width
                        :labelSpaceBetween="true">
                    </selectDown>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="6">
                <el-form-item label="运输条款">
                    <!-- <selectDown
                v-model:modelData="data.transterm"
                placeholder="请输入后搜索 "
                urlType="dict"
                urlQueryData="sys_transterm"  
                :option="initOption.ystkOption"
                fit-input-width
              >
              </selectDown> -->
                    <docSelects
                        v-model:modelData="data.transterm"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.dictData['sys_transterm']"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="付款方式">
                    <!-- <selectDown
            v-model:modelData="data.payment"
            placeholder="请输入后搜索 "
            urlType="dict"
            urlQueryData="sys_payment"
            :option="initOption.fkfsOption"
            fit-input-width
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.payment"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.dictData['sys_payment']"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="运输方式">
                    <!-- <selectDown
            v-model:modelData="data.transport"
            placeholder="请输入后搜索 "
            urlType="dict"
            urlQueryData="sys_transport"
            :option="initOption.ysfsOption"
            fit-input-width
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.transport"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.dictData['sys_transport']"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="业务进度">
                    <!-- <selectDown
            v-model:modelData="data.businessStatus"
            placeholder="请输入后搜索"
            urlType="dict"
            urlQueryData="sys_businessStatus"
            :option="initOption.ywjdOption"
            fit-input-width
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.businessStatus"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.dictData['sys_businessStatus']"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="6">
                <el-form-item label="航 线">
                    <selectDown
                        v-model:modelData="data.tradelaneId"
                        placeholder="请输入后搜索"
                        urlType="tradelane"
                        :option="initOption.hxOption"
                        fit-input-width
                        @getOption="getTradelaneName">
                    </selectDown>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="货物来源">
                    <!-- <selectDown
            v-model:modelData="data.cargoSource"
            placeholder="请输入后搜索"
            urlType="dict"
            urlQueryData="sys_cargoSource"
            :option="initOption.hwlyOption"
            fit-input-width
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.cargoSource"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.dictData['sys_cargoSource']"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="提单类型">
                    <!-- <selectDown
            v-model:modelData="data.blType"
            placeholder="请输入后搜索"
            urlType="dict"
            urlQueryData="sys_bl_type"
            fit-input-width
            :option="initOption.tdlxOption"
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.blType"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.dictData['sys_bl_type']"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="提单份数">
                    <el-input-number
                        :min="1"
                        :max="10"
                        v-model="data.blCount"
                        placeholder="请输入"
                        @keydown="parseInput" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="6">
                <el-form-item label="装货港">
                    <selectDown
                        v-model:modelData="data.portDepartureId"
                        placeholder="请输入后搜索"
                        urlType="port"
                        :option="initOption.zhgOption"
                        @getOption="getPortDepartureName"
                        @handleChange="portDepartChange"
                        fit-input-width>
                    </selectDown>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="卸货港">
                    <selectDown
                        v-model:modelData="data.portDischargeId"
                        placeholder="请输入后搜索"
                        urlType="port"
                        :option="initOption.xhgOption"
                        @getOption="getPortDischargeName"
                        @handleChange="portDischargeChange"
                        fit-input-width>
                    </selectDown>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="目的港">
                    <selectDown
                        v-model:modelData="data.portDestinationId"
                        placeholder="请输入后搜索"
                        urlType="port"
                        :option="initOption.mdgOption"
                        @getOption="getPortDestinationName"
                        @handleChange="portDestinationChange"
                        fit-input-width>
                    </selectDown>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="中转港">
                    <selectDown
                        v-model:modelData="data.portTransportId"
                        placeholder="请输入后搜索"
                        urlType="port"
                        :option="initOption.zzgOption"
                        fit-input-width
                        @getOption="getPortTransportName"
                        @handleChange="portTransportChange">
                    </selectDown>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="6">
                <el-form-item label="件数">
                    <el-input-number
                        v-model="data.digit"
                        @keydown="parseInput"
                        :disabled="checkDisabled"></el-input-number>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="包装单位">
                    <selectDown
                        v-model:modelData="data.packageUom"
                        placeholder="请输入后搜索"
                        urlType="package"
                        :option="initOption.bzdwOption"
                        fit-input-width>
                    </selectDown>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="毛重">
                    <el-input-number
                        v-model="data.grossWeight"
                        @keydown="parseInput"
                        :disabled="checkDisabled"></el-input-number>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="体积">
                    <el-input-number
                        v-model="data.volume"
                        @keydown="parseInput"
                        :disabled="checkDisabled"></el-input-number>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="18">
                <el-form-item label="配船要求">
                    <el-input v-model="data.bookingMemo" type="textarea" :rows="2"> </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="6">
                <el-form-item label="业务员">
                    <!-- <selectDown
            v-model:modelData="data.salesId"
            placeholder="请输入后搜索"
            urlType="man"
            :option="initOption.ywyOption"
            @getOption="getSalesData"
            fit-input-width
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.salesId"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.userList"
                        @getOption="getSalesData"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="操作员">
                    <!-- <selectDown
            v-model:modelData="data.operaterId"
            placeholder="请输入后搜索"
            urlType="man"
            :option="initOption.czyOption"
            @getOption="getOperaterData"
            fit-input-width
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.operaterId"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.userList"
                        @getOption="getOperaterData"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="订舱员">
                    <!-- <selectDown
            v-model:modelData="data.bookingId"
            placeholder="请输入后搜索"
            urlType="man"
            :option="initOption.dcyOption"
            @getOption="getBookingData"
            fit-input-width
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.bookingId"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.userList"
                        @getOption="getBookingData"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="客服">
                    <!-- <selectDown
            v-model:modelData="data.serviceId"
            placeholder="请输入后搜索"
            urlType="man"
            :option="initOption.kfOption"
            fit-input-width
            @getOption="getServiceData"
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.serviceId"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.userList"
                        @getOption="getServiceData"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="6">
                <el-form-item label="结算方式">
                    <!-- <selectDown
            v-model:modelData="data.settleType"
            placeholder="请输入后搜索"
            urlType="dict"
            urlQueryData="sys_settle_type"
            :option="initOption.jsfsOption"
            fit-input-width
          >
          </selectDown> -->
                    <docSelects
                        v-model:modelData="data.settleType"
                        placeholder="请输入后搜索"
                        :option="$store.state.businessBaseData.dictData['sys_settle_type']"
                        fit-input-width>
                    </docSelects>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="进出口类型">
                    <el-radio-group v-model="data.ieFlag" size="small">
                        <el-radio :label="0">出口</el-radio>
                        <el-radio :label="1">进口</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="6" class="hwzl">
                <el-form-item label="货物种类">
                    <!-- <el-radio-group
            v-model="data.cargoType"
            size="small"
          >
            <el-radio label="普货">普货</el-radio>
            <el-radio label="危险品">危险品</el-radio>
            <el-radio label="冷藏品">冷藏品</el-radio>
            <el-radio label="超长">超长</el-radio>
          </el-radio-group> -->
                    <el-checkbox-group
                        v-model="cargoTypeList"
                        size="small"
                        @change="cargoTypeChange">
                        <el-checkbox label="普货">普货</el-checkbox>
                        <el-checkbox label="危险品">危险品</el-checkbox>
                        <el-checkbox label="冷藏品">冷藏品</el-checkbox>
                        <el-checkbox label="超长">超长</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-col>
            <el-col :span="6" class="kf">
                <el-form-item label="SOC">
                    <el-checkbox v-model="data.isSoc" :true-label="1" :false-label="0" size="small">
                    </el-checkbox>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="6">
                <el-form-item label="接单日期">
                    <el-date-picker
                        v-model="data.recDate"
                        type="date"
                        placeholder="请选择"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="审核状态">
                    <el-input
                        :value="
                            data.checkStatus == 0
                                ? '未审核'
                                : data.checkStatus == 1
                                ? '提交审核'
                                : data.checkStatus == 2
                                ? '审核通过'
                                : data.checkStatus == -1
                                ? '驳回'
                                : ''
                        "
                        disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="录入日期">
                    <!-- <el-date-picker
            v-model="data.createTime"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD HH:mm:ss"
            disabled
          /> -->
                    <el-input v-model="data.createTime" placeholder="请选择" disabled> </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="录入账号">
                    <el-input disabled v-model="data.createBy"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <!-- 隐藏 -->
        <el-row :gutter="8" v-if="false">
            <el-col :span="6">
                <el-form-item label="列表颜色"> </el-form-item>
            </el-col>
        </el-row>

        <div class="middle-box">
            <span class="title"> 船运抬头 </span>
            <span class="btn" @click="openBLDialog"> 选择收发货人 </span>
            <el-checkbox v-model="data.isShutout" :true-label="1" :false-label="0" size="small"
                >退关</el-checkbox
            >
        </div>

        <el-row :gutter="64">
            <el-col :span="12">
                <el-form-item>
                    <template #label>
                        <el-button @click="openBLHistoryDialog('发货人')" link type="primary">
                            发货人：
                        </el-button>
                    </template>
                    <el-input type="textarea" :rows="4" v-model="data.shipperMemo"> </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="品名描述">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="data.cargoDescription"
                        @input="upperCargoDescription">
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="64">
            <el-col :span="12">
                <el-form-item>
                    <template #label>
                        <el-button @click="openBLHistoryDialog('收货人')" link type="primary">
                            收货人：
                        </el-button>
                    </template>
                    <el-input type="textarea" :rows="4" v-model="data.consigneeMemo"> </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="唛头">
                    <el-input type="textarea" :rows="4" v-model="data.marks" @input="uppermarks">
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="64">
            <el-col :span="12">
                <el-form-item>
                    <template #label>
                        <el-button @click="openBLHistoryDialog('通知人')" link type="primary">
                            通知人：
                        </el-button>
                    </template>
                    <el-input type="textarea" :rows="4" v-model="data.notifyMemo"> </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item>
                    <template #label>
                        <el-button @click="openBLHistoryDialog('第二通知人')" link type="primary">
                            第二通知人：
                        </el-button>
                    </template>
                    <el-input type="textarea" :rows="4" v-model="data.secondNotifyMemo"> </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <docDetailBaseBLDialog ref="BLDialog" @choose="getBLTitle"> </docDetailBaseBLDialog>
        <docDetailBaseBLHistoryDialog
            ref="BLHistoryDialog"
            :inKey="inkey"
            @choose="getBLHistoryTitle">
        </docDetailBaseBLHistoryDialog>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import selectDown from './selectDown.vue'
import docSelects from './docSelects.vue'
import docDetailBaseBLDialog from './docDetailBaseBLDialog.vue'
import docDetailBaseBLHistoryDialog from './docDetailBaseBLHistoryDialog.vue'
export default defineComponent({
    components: {
        selectDown,
        docSelects,
        docDetailBaseBLDialog,
        docDetailBaseBLHistoryDialog,
    },
    props: {
        //详细数据
        detailData: {
            type: Object,
            default: () => {},
        },
        //初始化option
        initOption: {
            type: Object,
            default: () => {},
        },
        checkDisabled: {
            type: Boolean,
            default: false,
        },
    },
    emits: ['update:detailData'],
    computed: {
        data: {
            get() {
                return this.detailData
            },
            set(value) {
                this.$emit('update:detailData', value)
            },
        },
        // 货物种类复选框数组
        cargoTypeList: {
            get() {
                return this.detailData.cargoType != 0 ? [this.detailData.cargoType] : []
            },
        },
    },
    data() {
        return {
            formData: {},
            inkey: 0,
        }
    },
    methods: {
        cargoTypeChange(val) {
            if (val.length != 0) {
                this.detailData.cargoType = val[val.length - 1]
            } else {
                this.detailData.cargoType = 0
            }
        },

        openBLDialog() {
            if (this.data.custId) {
                this.$refs.BLDialog.open(this.data.custId)
            } else {
                this.$message.error('请选择委托单位')
            }
        },
        /**
         * 选择收发货人选取
         * @param {object} bldata - 组件选取数据
         */
        getBLTitle(bldata) {
            this.data.shipperMemo = bldata.shiperTitle
            this.data.consigneeMemo = bldata.receiverTitle
            this.data.notifyMemo = bldata.notifyTitle
        },
        openBLHistoryDialog(strKey) {
            if (this.data.custId) {
                switch (strKey) {
                    case '发货人':
                        this.inkey = 1
                        break
                    case '收货人':
                        this.inkey = 2
                        break
                    case '通知人':
                        this.inkey = 3
                        break
                    case '第二通知人':
                        this.inkey = 5
                        break
                    default:
                        break
                }

                this.$refs.BLHistoryDialog.open(this.data.custId)
            } else {
                this.$message.error('请选择委托单位')
            }
        },
        /**
         * 单独选取
         * @param {object} blHistorydata - 组件选取数据
         */
        getBLHistoryTitle(blHistorydata) {
            if (this.inkey == 1) {
                this.data.shipperMemo = blHistorydata
            } else if (this.inkey == 2) {
                this.data.consigneeMemo = blHistorydata
            } else if (this.inkey == 3) {
                this.data.notifyMemo = blHistorydata
            } else if (this.inkey == 5) {
                this.data.secondNotifyMemo = blHistorydata
            }
        },
        /**
         * 将option.label传值给custName
         * @param {object} data - 委托单位下拉选择的option
         */
        getCustData(data) {
            this.data.custName = data.label
        },
        /**
         * 将option.label传值给salesName
         * @param {object} data - 业务员下拉选择的option
         */
        getSalesData(data) {
            this.data.salesName = data.label
        },
        /**
         * 将option.label传值给operaterName
         * @param {object} data - 操作员下拉选择的option
         */
        getOperaterData(data) {
            this.data.operaterName = data.label
        },
        /**
         * 将option.label传值给bookingName
         * @param {object} data - 订舱员下拉选择的option
         */
        getBookingData(data) {
            this.data.bookingName = data.label
        },
        /**
         * 将option.label传值给serviceName
         * @param {object} data - 客服下拉选择的option
         */
        getServiceData(data) {
            this.data.serviceName = data.label
        },
        /**
         * 将option.label传值给PortDepartureName
         * @param {object} data - 装货港选择的option
         */
        getPortDepartureName(data) {
            this.data.portDepartureName = data.label
            this.initOption.zhgOption = [
                {
                    id: data.id,
                    value: data.value,
                    label: data.selectLabel,
                },
            ]
        },
        // 清空选中数据同时清空港口option内的数据
        portDepartChange(val) {
            if (!val) {
                this.initOption.zhgOption = []
            }
        },
        /**
         * 将option.label传值给portDischargeName
         * @param {object} data - 卸货港选择的option
         */
        getPortDischargeName(data) {
            this.data.portDischargeName = data.label
            this.initOption.xhgOption = [
                {
                    id: data.id,
                    value: data.value,
                    label: data.selectLabel,
                },
            ]
        },
        portDischargeChange(val) {
            if (!val) {
                this.initOption.xhgOption = []
            }
        },
        /**
         * 将option.label传值给portDestinationName
         * @param {object} data - 目的港选择的option
         */
        getPortDestinationName(data) {
            this.data.portDestinationName = data.label
            this.initOption.mdgOption = [
                {
                    id: data.id,
                    value: data.value,
                    label: data.selectLabel,
                },
            ]
        },
        portDestinationChange(val) {
            if (!val) {
                this.initOption.mdgOption = []
            }
        },
        /**
         * 将option.label传值给portTransportName
         * @param {object} data - 中转港选择的option
         */
        getPortTransportName(data) {
            this.data.portTransportName = data.label
            this.initOption.zzgOption = [
                {
                    id: data.id,
                    value: data.value,
                    label: data.selectLabel,
                },
            ]
        },
        portTransportChange(val) {
            if (!val) {
                this.initOption.zzgOption = []
            }
        },
        /**
         * 将option.label传值给tradelaneName
         * @param {object} data - 航线选择的option
         */
        getTradelaneName(data) {
            this.data.tradelaneName = data.label
        },
        /**
         *  品名描述转大写
         * @param {string} data
         */
        upperCargoDescription(data) {
            this.data.cargoDescription = data.toUpperCase()
        },
        /**
         *  品名描述转大写
         * @param {string} data
         */ upperCargoDescription(data) {
            this.data.cargoDescription = data.toUpperCase()
        },
        /**
         *  唛头转大写
         * @param {string} data
         */
        uppermarks(data) {
            this.data.marks = data.toUpperCase()
        },
        /**
         * 数字输入框禁止输入e 和禁止.（小数）
         * @param {string} e
         */
        parseInput(e) {
            let key = e.key
            if (key === 'e' || key === '.') {
                e.returnValue = false
                return false
            }
            return true
        },
    },
    mounted() {},
    created() {},
})
</script>

<style lang="scss" scoped>
.el-textarea__inner {
    line-height: 1.2 !important;
}
@media only screen and (max-width: 1800px) {
    .hwzl {
        flex: 0 0 30%;
        max-width: auto;
    }

    .kf {
        flex: 0 0 20%;
        max-width: auto;
    }
}

@media only screen and (max-width: 1450px) {
    .hwzl {
        flex: 0 0 40%;
        max-width: auto;
    }

    .kf {
        flex: 0 0 10%;
        max-width: auto;
    }
}

.container {
    :deep(.el-form-item) {
        margin: 0;

        .el-form-item__label {
            font-size: 12px;
        }
    }

    :deep(.el-row) {
        margin-bottom: 8px;
        padding-right: 16px;
    }

    :deep(.el-input-number) {
        width: 100%;

        .el-input-number__decrease {
            display: none;
        }

        .el-input-number__increase {
            display: none;
        }

        .el-input__inner {
            text-align: left;
        }
    }

    .middle-box {
        border-top: 8px solid #f8f8f8;
        padding: 8px 0;

        .title {
            border-left: 4px solid #2867c9;
            padding-left: 32px;
            font-size: 16px;
            font-weight: 600;
        }

        .btn {
            cursor: pointer;
            color: #0063b9;
            margin: 0 16px 0 8px;
        }
    }
}
</style>
